<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="form-avatar">
				<u-upload ref="uUpload" :action="action" class="upload" width="128rpx" height="128rpx" max-count="1" :auto-upload="true" v-on:on-success="uploadAvatarSuccess" :custom-btn="true">
					<view slot="addBtn">
						<image class="icon" :src="formData.avatar?formData.avatar:'../../../static/icons/icon_upload.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
				<!-- <text>当前 {{formData.shop_name}}</text> -->
			</view>
			<view class="wd-form-wrapper">
				<u-form-item label="姓名" prop="name">
					<u-input type="text" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.name"></u-input>
				</u-form-item>
				<u-form-item label="手机" prop="mobile">
					<u-input type="number" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.mobile"></u-input>
				</u-form-item>
				<u-form-item label="性别" prop="sex_name" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.sex_name" @click="formItemClick('sexShow')"></u-input>
				</u-form-item>
				
				<u-form-item label="生日" prop="birthday">
					<u-input type="text" placeholder="选填项" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.birthday"></u-input>
				</u-form-item>

				<!-- <u-form-item label="课时费(元)" prop="cost">
					<u-input type="text" placeholder="必填项" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.cost"></u-input>
				</u-form-item> -->
			</view>
			<view class="wd-form-wrapper">
				<u-form-item label="教师简介"></u-form-item>
				<u-form-item prop="description" :border-bottom="false">
					<u-input type="textarea" placeholder="暂无" placeholder-style="{color: '#999999'}" :clearable="false" maxlength="999" height="200" :auto-height="true" v-model="formData.description"></u-input>
				</u-form-item>
			</view>
			<!-- <view class="wd-form-wrapper">
				<view class="form-title">相册</view>
				<u-upload ref="uUpload" :action="action" :file-list="formData.album_images" :show-upload-list="false" width="154" height="154" max-count="9" :auto-upload="true" :custom-btn="true" v-on:on-success="uploadImagesSuccess">
				</u-upload>
			</view> -->
			
			<view class="wd-form-wrapper">
				<view class="form-title">相册</view>
					<view v-if="!formStatus" >
						<image :src="item" style="width: 85px;height: 85px;" mode="aspectFill" v-for="(item,index) in formData.album_images"></image>
						
					</view>
					
				<u-upload v-else ref="uUpload" :action="action" :show-upload-list="true" :file-list="albumImages" width="154" height="154" max-count="9" :auto-upload="true" :custom-btn="false" v-on:on-success="uploadImagesSuccess"  @on-remove="removeImage">
				</u-upload>
			</view>
			
		</u-form>
		
		<view class="wd-form-footer">
			<view class="wd-form-footer__btn">
				<u-button v-if="formStatus" :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">保存</u-button>
				<u-button v-else :custom-style="wd_button_plain" shape="circle" :ripple="true" @click="formStatus=true">编辑</u-button>
			</view>
		</view>
		
		<!-- 选择性别 -->
		<u-action-sheet v-model="sexShow" :list="sexList" @click="sexConfirm"></u-action-sheet>
		<!-- 选择生日 -->
		<u-calendar mode="date" toolTip="请选择生日" v-model="birthShow" @change="birthChange"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teacher_id:0,
				action:'',
				formStatus: false,
				albumImages:[],
				formData: {
					avatar:'',
					name: '',
					mobile: '',
					sex: '',
					sex_index:0,
					birthday: '',
					step_price:'',
					album_images: [],
					description: ''
				},
				rules: {
					name: [{ required: true, trigger: ['change','blur'], message: '请填写姓名' }],
					mobile: [{ required: true, trigger: ['change','blur'], message: '请填写手机号码' }],
					sex: [{ required: true, trigger: 'change', message: '请选择性别' }],
					// birthday: [{ required: true, trigger: 'change', message: '请选生日' }],
					roles: [{ required: true, trigger: 'change', message: '请选择来源' }],
				},
				sexShow: false,
				sexList: [
					{ value: 0, text: '女' },
					{ value: 1, text: '男' },
				],
				birthShow: false,
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		
		onLoad(options){
			this.action = getApp().globalData.apiUri+'/fitness.common/upload';
			if(options.teacher_id && options.teacher_id>0){
				this.teacher_id = options.teacher_id || 0;
				this.fetchTeacherDetail()
			}else{
				this.formStatus = true;
			}
			//this.get_shop_detail();
		},
		methods: {
			//老师详情
			fetchTeacherDetail(){
				var teacher_id = this.teacher_id;
				this.$core.get({url:'fitness.manage/teacher_detail',data:{teacher_id:teacher_id},success:(ret)=>{
					ret.data.sex_index = ret.data.sex;
					ret.data.sex = ret.data.sex == 1 ? '男' :'女';
					ret.data.birthday = ret.data.birthday ? ret.data.birthday :'';
				    this.formData = ret.data;
					let images = [];
					for(let i=0;i<ret.data.album_images.length;i++){
						images.push({url:ret.data.album_images[i]});
					}
					this.albumImages = images;
				}});
			},
			// 请选择性別类型
			sexConfirm(index) {
				this.formData.sex_name = this.sexList[index].text;
				this.formData.sex = this.sexList[index].value;
			},
			//图片上传成功-老师头像
			uploadAvatarSuccess(e){
				this.formData.avatar = e.data.fullurl;
			},
			
			uploadImagesSuccess(e) {
				let album_images = this.formData.album_images;
				album_images.push(e.data.fullurl);
				this.formData.album_images = album_images;
			},
			removeImage(index, lists, name) {
				this.albumImages.splice(index, 1);
				this.formData.album_images.splice(index,1);
			},
			formItemClick(name) {
				if (this.formStatus) {
					this[name] = true
				}
			},
			
			// 请选择生日
			birthChange(e) {
				this.formData.birthday = e.result
			},
			submit() {
				var that = this;
				let shop = this.$core.getCurrentShop();
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var formData = that.formData;
						formData['teacher_id'] = that.teacher_id;
						formData['shop_id'] = shop.id;
						that.$core.post({url:'fitness.manage/set_teacher',data:formData,success:(ret)=>{
							that.getOpenerEventChannel().emit("setSuccess",{})
							uni.showToast({title: ret.msg,icon: 'none',})
							uni.navigateBack({})
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.form-avatar {
		margin: 32rpx;
		.upload {
			display: block;
			margin: 0 auto;
			width: 128rpx;
			height: 128rpx;
			/deep/ .u-list-item {
				border: 0;
				margin: 0;
			}
			/deep/ .u-preview-image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}
		}
		.icon {
			display: block;
			width: 128rpx;
			height: 128rpx;
			background: #EDEDED;
			border-radius: 50%;
		}
		text {
			display: block;
			margin-top: 18rpx;
			text-align: center;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #999999;
		}
	}
	.form-title {
		margin-bottom: 10rpx;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #333333;
	}
	/deep/ .u-add-wrap {
		background: #FFFFFF !important;
	}
	
	.popup-wrapper {
		&__title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
		}
		&__body {
			display: flex;
			flex-wrap: wrap;
			max-height: 60vh;
			padding: 24rpx;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			/deep/ .u-checkbox {
				padding: 8rpx 0;
			}
			/deep/ .u-checkbox__label {
				flex: 1;
				margin-left: 24rpx;
			}
		}
	}
</style>